<script setup lang="ts">
import MainContentBox from '@/components/main-content-box/index.vue'
import MainContentCard from '@/components/main-content-box/main-content-card.vue'
import { SIDE_BAR_CONFIG } from '@/config/side-bar'
</script>

<template>
  <div
    id="main-container"
    class="main-content-class p-2 flex flex-col overflow-y-scroll"
  >
    <main-content-box
      class="mb-2"
      v-for="content in SIDE_BAR_CONFIG"
      :key="content.href"
      :id="content.href.replace('#', '')"
      :title="content.title"
    >
      <main-content-card
        v-for="card in content.children"
        :key="card.url"
        :url="card.url"
        :target="card.target"
        :title="card.title"
        :description="card.description"
      />
    </main-content-box>
  </div>
</template>

<style lang="scss" scoped>
.main-content-class {
  max-height: 100%;
  height: 100%;
}
</style>
